<template>
  <div class="people base-main">
    <div class="tip-view">
      <p>首页 / 权限管理 / 用户管理</p>
    </div>
    <!-- 搜索视图 -->
    <div ref="searchv" class="search-view">
      <el-input v-model="searchInfo.name" placeholder="请输入用户名" />
      <el-button
        class="btnRed"
        type="danger"
        @click="searchAction"
      >查询</el-button>
      <el-button type="warning" @click="visible = true">新增用户+</el-button>
      <el-button type="primary" @click="visible3 = true">分配角色</el-button>
      <el-button type="success">导出</el-button>
    </div>
    <!-- 用户列表 -->
    <div class="list">
      <simpleTable
        :fix-height="true"
        :table-h="tableH"
        header-bg-color="#f5f7fa"
        :is-show-operation="true"
        :table-data="peopleList"
        :props="props"
      >
        <template #icon="{ data }">
          <img
            class="iconImg"
            :src="
              data.type === 'admin'
                ? './../../../static/img/admin.png'
                : data.type === 'business'
                  ? './../../../static/img/business.png'
                  : './../../../static/img/temporary.png'
            "
            alt=""
          >
        </template>
        <template #type="{ data }">
          <el-tag type="warning">{{ data.type }}</el-tag>
        </template>
        <template #isOpen="{ data }">
          <el-switch v-model="data.isOpen" active-color="#13ce66" />
        </template>
        <template #operation="{ data }">
          <a
            class="linkRed"
            href="javascript:;"
            @click="modifiyUser(data)"
          >修改</a>
          <span style="color: #f0f2f5"> | </span>
          <a href="javascript:;" @click="deleteUser(data)">删除</a>
        </template>
      </simpleTable>
    </div>
    <!-- 新增用户 -->
    <a-modal
      title="新增用户"
      :visible="visible"
      :confirm-loading="confirmLoading"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit"
      @cancel="visible = false"
    >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            style="width: 280px"
            autocomplete="off"
            placeholder="英文或拼音(用于登录)"
          />
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.trueName"
            style="width: 280px"
            autocomplete="off"
            placeholder="英文或汉字"
          />
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input
            v-model="form.mobile"
            style="width: 280px"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.password"
            style="width: 280px"
            autocomplete="off"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      title="修改密码"
      :visible="visible2"
      :confirm-loading="confirmLoading2"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit2"
      @cancel="visible2 = false"
    >
      <el-form :model="form2">
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input
            v-model="form2.password"
            style="width: 280px"
            autocomplete="off"
            placeholder="请输入新密码"
          />
        </el-form-item>
      </el-form>
    </a-modal>
    <!-- 分配角色 -->
    <a-modal
      title="分配角色"
      :visible="visible3"
      :confirm-loading="confirmLoading3"
      ok-text="确定"
      cancel-text="取消"
      ok-type="danger"
      @ok="onSubmit3"
      @cancel="visible3 = false"
    >
      <el-form :model="form3">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-select v-model="form3.name" placeholder="请选择用户名">
            <el-option
              v-for="item in peopleList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分配角色" style="margin-left:50px">
          <el-radio-group v-model="form3.role">
            <el-radio label="管理员" />
            <el-radio label="商务" />
            <el-radio label="临时用户" />
          </el-radio-group>
        </el-form-item>
      </el-form>
    </a-modal>
  </div>
</template>
<script>
import simpleTable from './../../components/simpleTable'
export default {
  name: 'People',
  components: {
    simpleTable
  },
  data() {
    return {
      tableH: 0,
      visible: false,
      visible2: false,
      visible3: false,
      confirmLoading: false,
      confirmLoading2: false,
      confirmLoading3: false,
      searchInfo: {
        name: ''
      },
      props: [
        {
          prop: 'id',
          label: '用户id'
        },
        {
          prop: 'name',
          label: '用户名'
        },
        {
          prop: 'icon',
          label: '图标'
        },
        {
          prop: 'type',
          label: '所属角色'
        },
        {
          prop: 'operater',
          label: '操作人'
        }
      ],
      peopleList: [
        {
          name: 'Ying-1',
          id: 200,
          type: 'admin',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=1'
        },
        {
          name: 'Ying-2',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=3'
        },
        {
          name: 'Ying-3',
          id: 200,
          type: 'temporary',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=5'
        },
        {
          name: 'Ying-4',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=2'
        },
        {
          name: 'Ying-5',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=4'
        },
        {
          name: 'Ying-6',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=6'
        },
        {
          name: 'Ying-7',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=7'
        },
        {
          name: 'Ying-8',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=8'
        },
        {
          name: 'Ying-9',
          id: 200,
          type: 'business',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=9'
        },
        {
          name: 'Ying-10',
          id: 200,
          type: 'temporary',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=1'
        },
        {
          name: 'Ying-11',
          id: 200,
          type: 'temporary',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=2'
        },
        {
          name: 'Ying-12',
          id: 200,
          type: 'temporary',
          operater: 'admin',
          time: '2020-01-23 23:03:00',
          icon: 'https://picsum.photos/300/600?random=3'
        }
      ],
      form: {
        name: '',
        trueName: '',
        mobile: '',
        password: ''
      },
      form2: {
        password: ''
      },
      form3: {
        name: '',
        role: 'admin'
      },
      formLabelWidth: '120px'
    }
  },
  computed: {},
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          alert('刷新用户管理页')
        }
      }
    }
  },
  created() {},
  mounted() {
    this.caculateHeight()
  },
  methods: {
    caculateHeight() {
      this.$nextTick(() => {
        const windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        const topHeight =
          64 + 54 + 20 + 56 + 40 + this.$refs.searchv.clientHeight
        const tableH = windowHeight - topHeight - 20
        this.tableH = tableH
        console.log(
          '打印搜索模块高度----',
          windowHeight,
          this.$refs.searchv.clientHeight,
          tableH
        )
      })
    },
    searchAction() {
      console.log('打印查询参数---', this.searchInfo)
    },
    onSubmit() {
      this.confirmLoading = true
      setTimeout(() => {
        this.confirmLoading = false
        this.visible = false
      }, 500)
      console.log('打印添加确定按钮数据----', this.form)
    },
    onSubmit2() {
      this.confirmLoading2 = true
      setTimeout(() => {
        this.confirmLoading2 = false
        this.visible2 = false
      }, 500)
      console.log('打印修改密码按钮数据----', this.form2)
    },
    onSubmit3() {
      this.confirmLoading3 = true
      setTimeout(() => {
        this.confirmLoading3 = false
        this.visible3 = false
      }, 500)
      console.log('打印角色分配按钮数据----', this.form3)
    },
    deleteUser(row) {
      console.log('删除用户---', row)
    },
    modifiyUser(row) {
      this.visible2 = true
      console.log('修改密码---', row)
    }
  }
}
</script>
<style lang="scss" scoped>
.people {
  .iconImg {
    width: 20px;
    height: 20px;
  }
}
</style>
